import React, {useEffect, useState, forwardRef, useImperativeHandle} from 'react';
import { Col, Button, Icon } from 'antd';
import '../index.less'
import LineMap from './line';
import BarMap from './bar';
import moment from 'moment';
import ProgressBox from '../../../components/ProgressBox';
function policyCommon(props, forwardedRef) {
  const [mapData, setMapData] = useState([]);
  const [preveIndex, setPreveIndex] = useState(0);
  useEffect(() => {
    setData(props.type)
  },[props.trendList, props.type]);
  useEffect(() => {
  },[props.timeType]);
  useEffect(() => {}, [props.isPercentage])
  useImperativeHandle(forwardedRef, () => ({
    getCurrentTime,
    setPreveFn,
    preveIndex
  }));
  function setData(type) {
    let types = 'line'
    if (type === '2') {
      types = 'bar'
    }
    const lists = props.trendList.map(item => {
      item.type = types
      return item
    })
    setMapData(lists)
  }
  function prevData() {
    const nums = preveIndex + 1
    setPreveIndex(nums);
    props.nextFn && props.nextFn(nums);
  };
  function nextData () {
    if (preveIndex > 0) {
       const nums = preveIndex - 1
       setPreveIndex(nums);
       props.nextFn && props.nextFn(nums);
    }
  };
  const setPreveFn = () => {
    setPreveIndex(0);
  };
  const getCurrentTime = (riskTrendType, nums) => {
    let current_end = moment(props.requestParam.end).format('YYYY-MM-DD HH:mm:ss');
    let current_start = moment(props.requestParam.start).format('YYYY-MM-DD HH:mm:ss');
    const endTime = moment(props.requestParam.end).valueOf();
    switch (riskTrendType) {
      case '1':
        current_end = moment(endTime - nums * 3600000).format('YYYY-MM-DD HH:mm:ss');
        current_start = moment(endTime - (nums + 1) * 3600000).format('YYYY-MM-DD HH:mm:ss');
        break;
      case '2':
        current_end = moment(endTime - nums * 6 * 3600000).format('YYYY-MM-DD HH:mm:ss');
        current_start = moment(endTime - (nums + 1) * 6 * 3600000).format('YYYY-MM-DD HH:mm:ss');

        break;
      case '3':
        current_end = moment(endTime - nums * 24 * 3600000).format('YYYY-MM-DD HH:mm:ss');
        current_start = moment(endTime - (nums + 1) * 24 * 3600000).format('YYYY-MM-DD HH:mm:ss');
        break;
      case '4':
          current_end = moment(endTime - nums * 60 * 3600000).format('YYYY-MM-DD HH:mm:ss');
          current_start = moment(endTime - (nums + 1) * 60 * 3600000).format('YYYY-MM-DD HH:mm:ss');
          break;
      default:
        break;
    }

    return { current_start, current_end };
  }
  return (
    <div className='policy-common-ment'>
        <div className='polocy-line-map'>
           <p>{props.lineTitle}</p>
           <div>
             <div>{props.component}</div>
             <div className='policy-boxs risk-trend-box'>
               <Col key={1} span={24}>
                  {(props.type === '1' && (<LineMap isLengen={true} isPercentage={props.isPercentage} data={mapData}></LineMap>))
                    || (<BarMap isLengen={true} isPercentage={props.isPercentage} data={mapData}></BarMap>)
                  }
               </Col>
               { (props.timeType !== '5' && props.timeType !== '6')  ? (
                 <div>
                  {props.showLeftBtn ? (
                    <Button onClick={() => prevData()} className='prev-btn' shape='circle'>
                      <Icon type='left' />
                    </Button>
                   ) : (
                    ''
                  )} 
                {props.showRightBtn ? (
                    <Button onClick={() => nextData()} className='next-btn' shape='circle'>
                      <Icon type='right' />
                    </Button>
                  ) : (
                    ''
                  )}
                </div>
              ) : (
                ''
              )}  
             </div>
           </div>
        </div>
        <div className='policy-progress-boxs'>
           <p>{props.progressTitle}</p>
           <div>
             <ProgressBox
               leftLabel= {props.leftLabel}
               rightLabel={props.rightLabel}
               keyValue={props.keyValue}
               dataSource={props.dataSource}
               total={props.total}
               renderLabel={props.renderLabel}
               renderValue= {props.renderValue}
             />
           </div>
        </div>
    </div>
  )
}
export default forwardRef(policyCommon)